<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
			 <style type="text/css">
			     table thead tr th {
			         text-align:center;
			     }
			 </style>
	</head>
    

<body>
    <body>
              <div id="app">
				  
                  <table border=1 width=600 align=center>
                    <thead>
						<tr align="center"><td colspan="4">用户管理</td>
                        <tr>
                            <th>用户名</th>
                            <th>年龄</th>
                            <th>毕业学校</th>
                            <th>备注</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template v-for="(row, index) in rows ">
                            <tr v-if="index>=(curpage-1)*pagesize&&index<curpage*pagesize">
                                <td>{{row.Name}}</td>
                                <td>{{row.Age}}</td>
                                <td>{{row.School}}</td>
                                <td>{{row.Remark}}</td>
                            </tr>
                        </template>
                    </tbody>
                </table>
				
				<nav style="float:center;">
				 <ul style="width: 400;align=center;">
				    <template v-for="page in Math.ceil(rows.length/pagesize)">
				        <li style="display: inline;" v-on:click="PrePage()" id="prepage" v-if="page==1" class="disabled"><a href="#">上一页</a></li>
				        <li style="display: inline;" v-if="page==1" class="active" v-on:click="NumPage(page, $event)"><a href="#">{{page}}</a></li>
				        <li style="display: inline;" v-else v-on:click="NumPage(page, $event)"><a href="#">{{page}}</a></li>
				        <li style="display: inline;" id="nextpage" v-on:click="NextPage()" v-if="page==Math.ceil(rows.length/pagesize)"><a href="#">下一页</a></li>
				    </template>
				</ul>
				 </nav>
           
        </div>
		
		
		<script src="../js/vue.min.js"></script>
		<script src="../js/axios.js"></script>
		<script src="../js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript">
            //Model
            var data = {
                rows: [
                { Id: 1, Name: '小明', Age: 18, School: '光明小学', Remark: '三好学生' },
                { Id: 2, Name: '小刚', Age: 20, School: '复兴中学', Remark: '优秀班干部' },
                { Id: 3, Name: '吉姆格林', Age: 19, School: '光明小学', Remark: '吉姆做了汽车公司经理' },
                { Id: 4, Name: '李雷', Age: 25, School: '复兴中学', Remark: '不老实的家伙' },
                { Id: 5, Name: '韩梅梅', Age: 22, School: '光明小学', Remark: '在一起' },
                ],
                pagesize: 2,
                curpage:1,//当前页的页码
            };
        //ViewModel
        var vue = new Vue({
            el: '#app',
            data: data,
            methods: {
                //上一页方法
                PrePage: function (event) {
                    $(".pagination .active").prev().trigger("click");
                },
                //下一页方法
                NextPage: function (event) {
                    $(".pagination .active").next().trigger("click");
                },
                //点击页码的方法
                NumPage: function (num, event) {
                    if (this.curpage == num) {
                        return;
                    }
                    this.curpage = num;
                    $(".pagination li").removeClass("active");
                    if (event.target.tagName.toUpperCase() == "LI") {
                        $(event.target).addClass("active");
                    }
                    else {
                        $(event.target).parent().addClass("active");
                    }
                    if (this.curpage == 1) {
                        $("#prepage").addClass("disabled");
                    }
                    else {
                        $("#prepage").removeClass("disabled");
                    }
                    if (this.curpage == Math.ceil(this.rows.length / this.pagesize)) {
                        $("#nextpage").addClass("disabled");
                    }
                    else {
                        $("#nextpage").removeClass("disabled");
                    }
                }
            }
        });
        </script>
    </body>
    </html>